@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

html,
body,
.container,
.content-wrap {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.container {
    background: #373a47;
}

.menu-wrap a {
    color: #b8b7ad;
}

.menu-wrap a:hover,
.menu-wrap a:focus {
    color: #c94e50;
}

.cai_dan_main {
    position: relative;
    z-index: 1;
    transition: 2s;
    .header_left {
        .search-icon {
            width: r(35);
            height: r(35);
        }
    }
    //	.cai_dan_ul {
    //		width: 100%;
    //		height: r(1245);
    //		li {
    //			height: r(98);
    //			border-bottom: r(1) solid #222523;
    //			line-height: r(98);
    //			cursor: pointer;
    //			a {
    //				display: inline-block;
    //				width: r(170);
    //				height: 0;
    //				margin-left: r(62);
    //				color: white;
    //				font-size: r(30);
    //			}
    //		}
    //		.cd_hover_li {
    //			 .er_ji_ul{
    //				display: none;
    //				 li{
    //					a{
    //						color: red;
    //					}
    //				}
    //			}
    //		}
    //		.cd_hover_li:hover{
    //			.er_ji_ul{
    //				display: block;
    //			}
    //		}
    //	}
    dl,
    dt,
    dd {
        display: block;
        margin: 0;
    }
    .leftsidebar_box {
        //侧边栏菜单
        width: 100%;
        height: auto !important;
        overflow: visible !important;
        position: fixed;
        height: 100% !important;
        top: r(90);
    }
    .leftsidebar_box dt {
        height: r(98);
        padding-left: r(40);
        padding-right: r(10);
        background-repeat: no-repeat;
        background-position: r(10) center;
        color: #f5f5f5;
        font-size: r(30);
        position: relative;
        line-height: r(98);
        cursor: pointer;
        border-bottom: r(1) solid #222523;
        &:before {
            position: absolute;
            display: block;
            content: "";
            width: r(10);
            height: 100%;
            background: #B0AEAD;
            left: r(-2);
            z-index: 0;
        }
        &:hover:before,
        &:focus:before,
        &:active:before {
            -webkit-transition: width 0.2s ease-in;
            transition: width 0.2s ease-in;
            width: 100%;
            opacity: 0.5;
        }
    }
    .leftsidebar_box dd {
        height: r(98);
        background: #1e1d1d;
        padding-left: r(40);
        //width: r(462);
        line-height: r(98);
        border-bottom: r(1) solid #222523;
        padding-left: r(90);
        &:before {
            position: absolute;
            display: block;
            content: "";
            width: r(10);
            height: 100%;
            background: #BDBDBD;
            left: r(-2);
            z-index: 0;
        }
        &:hover:before,
        &:focus:before,
        &:active:before {
            -webkit-transition: width 0.2s ease-in;
            transition: width 0.2s ease-in;
            width: 100%;
            opacity: 0.5;
        }
    }
    .app .disable {
        color: #f8df64;
    }
    .leftsidebar_box dd a {
        display: block;
        color: #777777;
        line-height: r(98);
        font-size: r(30);
    }
    .leftsidebar_box dt img {
        position: absolute;
        right: r(10);
        top: r(40);
        width: r(10);
        height: r(10);
    }
    .leftsidebar_box dl dd:last-child {
        padding-bottom: r(10);
    }
    .cai_dan_bottom {
        position: absolute;
        bottom: r(-1260);
        width: 100%;
        ul {
            margin-top: r(18);
            border-top: r(1) solid #222523;
            border-bottom: r(1) solid #222523;
            width: 100%;
            height: r(100);
            li {
                display: inline-block;
                width: 31%;
                height: r(100);
                text-align: center;
                line-height: r(100);
                border-right: r(1) solid #222523;
                a {
                    display: inline-block;
                    width: r(35);
                    height: r(33);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            li:last-child {
                border-right: 0;
            }
        }
    }
}


/* Menu Button */

.menu-button {
    position: fixed;
    z-index: 1000;
    padding: 0;
    /*width: 2.5em;
	height: 2.25em;*/
    width: r(98);
    height: r(88);
    border: none;
    text-indent: 2.5em;
    font-size: 1.5em;
    color: transparent;
    background: transparent;
}

.menu-button::before {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    bottom: 0.5em;
    left: 0.5em;
    background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
    content: '';
}

.menu-button:hover {
    opacity: 0.6;
}

.close-button:focus,
.menu-button:focus {
    outline: none;
}


/* Close Button */

.close-button {
    width: r(32);
    height: r(32);
    position: absolute;
    right: 1em;
    top: 1em;
    overflow: hidden;
    text-indent: r(32);
    border: none;
    z-index: 1001;
    background: transparent;
    color: transparent;
}

.close-button::before,
.close-button::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    background: #888;
}

.close-button::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close-button:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


/* Menu */

.menu-wrap {
    position: absolute;
    z-index: 1001;
    width: 67%;
    height: 100%;
    margin-left: r(-40);
    font-size: 1.15em;
    -webkit-transform: translate3d(-280px, 0, 0);
    transform: translate3d(-280px, 0, 0);
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}

.menu {
    position: relative;
    z-index: 1000;
    /*padding: 3em 1em 0;*/
}

.menu,
.close-button {
    opacity: 0;
    -webkit-transform: translate3d(-160px, 0, 0);
    transform: translate3d(-160px, 0, 0);
    -webkit-transition: opacity 0s 0.3s, -webkit-transform 0s 0.3s;
    transition: opacity 0s 0.3s, transform 0s 0.3s;
    -webkit-transition-timing-function: cubic-bezier(.17, .67, .1, 1.27);
    transition-timing-function: cubic-bezier(.17, .67, .1, 1.27);
}


/* Morph Shape */

.morph-shape {
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    fill: #171616;
    //  opacity: 0.9;
    //  animation: hue 10s linear infinite; 
    transition: all .3s ease;
}

@keyframes hue {
    0% {
        filter: hue-rotate(0deg);
        opacity: 1;
    }
    50% {
        filter: hue-rotate(180deg);
        opacity: 0.8;
    }
    100% {
        filter: hue-rotate(360deg);
        opacity: 1;
    }
}


/* Shown menu */

.show-menu .menu-wrap,
.show-menu .content::before {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.show-menu .menu-wrap,
.show-menu .menu,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.show-menu .menu,
.show-menu .close-button {
    opacity: 1;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.show-menu .content::before {
    opacity: 1;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
}